<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>图片预加载之无序加载</title>
        <style type="text/css">
        	html,body{
        		height: 100%;
        	}
        	.box{
        		text-align: center;
        	}
        	.btn{
        		display: inline-block;
        		height: 30px;
        		line-height: 30px;
        		border:1px solid #ccc;
        		background: #fff;
        		padding: 0 10px;
        		margin-right: 50px;
        		color: #333;
        		text-decoration: none;
        	}
        	.btn:hover{
        		background: #eee;
        	}
        	.loading{
        		position: fixed;
        		top: 0;
        		left: 0;
        		width: 100%;
        		height: 100%;
        		background: #eee;
        		text-align: center;
        		font-size: 30px;
        	}
        	.progress{
        		margin-top: 300px;
        	}
        </style>
    </head>
    <body>
    <div class="box">
    	<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" id="img" width="1200" height="600">
    	<p>
    		<a href="javascript:;" class="btn" data-control="prev">上一页</a>
    		<a href="javascript:;" class="btn" data-control="next">下一页</a>
    	</p>
    </div>
    <div class="loading">
    	<p class="progress">0%</p>
    </div>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src='js/perload.js'></script>
    <script type="text/javascript">
    	// var imgs=[
    	// 	'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
    	// 	'http://file.mumayi.com/forum/201305/09/104352px9yz90eu717q79l.jpg',
    	// 	'http://pic.58pic.com/58pic/17/51/71/14Y58PICPzR_1024.jpg',
    	// 	'http://img2.niutuku.com/desk/anime/3721/3721-9558.jpg',
    	// 	'http://www.33lc.com/article/UploadPic/2012-8/201281310522387763.jpg',
    	// ];
    	// var index=0,
    	// 	len=imgs.length;
    	// 	count=0;
    	// 	$progress=$('.progress');
    	// $.each(imgs,function(i,src){
    	// 	var imgObj=new Image();
    	// 	$(imgObj).on('load error',function(){
    	// 		$progress.html(Math.round((count+1)/len*100)+'%');
    	// 		count++;
    	// 		if(count>len-1){
    	// 			$('.loading').hide();
    	// 			document.title='1/'+len;
    	// 		}
    			
    	// 	});
    	// 	imgObj.src=src;
    	// });


    	// $('.btn').on('click',function(){
    	// 	if('prev'===$(this).data("control")){//上一张
    	// 		index=Math.max(0,--index);
    	// 	}else{//下一张
    	// 		index=Math.min(len-1,++index);
    	// 	}
    	// 	document.title=(index+1)+'/'+len;
    	// 	$('#img').attr('src',imgs[index]);
    	// });


    	var imgs=[
    		'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
    		'http://file.mumayi.com/forum/201305/09/104352px9yz90eu717q79l.jpg',
    		'http://pic.58pic.com/58pic/17/51/71/14Y58PICPzR_1024.jpg',
    		'http://img2.niutuku.com/desk/anime/3721/3721-9558.jpg',
    		'http://www.33lc.com/article/UploadPic/2012-8/201281310522387763.jpg',
    	];
    	var index=0,
    		len=imgs.length;
    		$progress=$('.progress');


    	$.preload(imgs,{
    		each:function(count){
    			$progress.html(Math.round((count+1)/len*100)+'%');
    		},
    		all:function(){
    			$('.loading').hide();
    			document.title='1/'+len;
    		}
    	});

    	// $.each(imgs,function(i,src){
    	// 	var imgObj=new Image();
    	// 	$(imgObj).on('load error',function(){
    	// 		$progress.html(Math.round((count+1)/len*100)+'%');
    	// 		count++;
    	// 		if(count>len-1){
    	// 			$('.loading').hide();
    	// 			document.title='1/'+len;
    	// 		}
    			
    	// 	});
    	// 	imgObj.src=src;
    	// });


    	$('.btn').on('click',function(){
    		if('prev'===$(this).data("control")){//上一张
    			index=Math.max(0,--index);
    		}else{//下一张
    			index=Math.min(len-1,++index);
    		}
    		document.title=(index+1)+'/'+len;
    		$('#img').attr('src',imgs[index]);
    	});
    </script>
    </body>
</html>